function muestraBocata(contexto, posX, posY, texto, color) {
	contexto.save();
	contexto.font = "20px cursive";
	var alturaFuente = 20;
	var margenBocadillo = 10;	
	// Calculamos el ancho del bocadillo, las lineas vendrán separadas por ";"
	var ancho = 0;
	var lineas = texto.split(";");
	var numLineas = 0;
	for (var i=0; i<lineas.length; i++) {
		numLineas++;
		ancho = Math.max(contexto.measureText(lineas[i]).width, ancho);
	}
	// Dibujamos el bocadillo
	var posXMin = posX - ancho/2 - margenBocadillo;
	var posXMax = posX + ancho/2 + margenBocadillo;
	var posYMin = posY - alturaFuente * numLineas - 20 - margenBocadillo;
	contexto.fillStyle = color;
	contexto.beginPath();
	contexto.moveTo(posX, posY);
	contexto.lineTo(posX-15, posY-20);
	contexto.lineTo(posXMin, posY-20);
	contexto.lineTo(posXMin, posYMin);
	contexto.lineTo(posXMax, posYMin);
	contexto.lineTo(posXMax, posY-20);
	contexto.lineTo(posX, posY-20);
	contexto.closePath();
	contexto.fill();
	contexto.fillStyle = "black";
	contexto.stroke();
	// EScribimos el texto
	var anchoLinea;
	var posXLinea;
	for (var i=0; i<lineas.length; i++) {
		anchoLinea = contexto.measureText(lineas[i]).width;
		posXLinea = posXMin + (ancho - anchoLinea)/2 + 10;
		contexto.fillText(lineas[i], posXLinea, posYMin + i * alturaFuente + 12 + margenBocadillo);
	}
	contexto.restore();
}

function animacionBocadillos(bocadillos) {
	this.contexto = document.getElementById("canvasBoc").getContext("2d");
	this.bocadillos = bocadillos;
	this.indice = 0;
	var that = this;
	this.progresa = function() {
		this.contexto.clearRect(0,0,800,400);
		if (this.indice >= this.bocadillos.length) return;
		var bocata = this.bocadillos[this.indice]; 
		muestraBocata(this.contexto, bocata[0], bocata[1], bocata[2], bocata[3]);
		this.indice++;
		setTimeout(function(){that.progresa()}, 3000);
	}	
}

window.onload = function() {
	var bocadillos = [
						[565,270, "Hola,;¿Estas buscando algo?", "#fff"],
						[420,280, "Sí,;busco a mis amigos.;¿Los has visto?", "#fff"],
						[565,270, "No.;¿Quieres que te ayude?", "#fff"],
						[420,280, "¡Sí!", "yellow"],
						[565,270, "Consigue lo que aparece en esta lista;y te diré donde están tus amigos.", "#fff"]
					];
	new animacionBocadillos(bocadillos).progresa();
}


